import React, { useEffect, useRef } from "react";
import "./App.css";
import Geo from "./model/gameObject/Geo";
import Scene from "./model/gameObject/Scene";
import { Matrix, Matrix4, Vector3 } from "three";
import Mat from "./model/gameObject/Mat";
import GameObject from "./model/gameObject/GameObject";
import Mesh from "./model/Mesh/Mesh";
import GameApplication from "./system/GameApplication";
import Box from "./model/Mesh/Box";
import MyImage from "./model/Mesh/MyImage";
import MySquare from "./model/Mesh/MySquare";
import BB2RUVMesh from "./model/Mesh/BB2RUVMesh";
import ZoomMesh from "./model/Mesh/ZoomMesh";


let canvas: HTMLCanvasElement;
let index: number = 0;
let gameApplication: GameApplication;
let pvM4: Matrix4;




class App extends React.Component {
    componentDidMount() {
        if (canvas == null) return;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;



        index++;
        if (index == 2) {
            gameApplication = new GameApplication({ canvas: canvas });
            gameApplication.init();
            gameApplication.GameStart();

            pvM4 = GameApplication.getCamera()?.getPvM4()!;

            const { frame, scene } = gameApplication;


            const getViewToWorld = this.getViewToWorld;

            // const image = new Image();
            // image.src = '../image/image01.jpg';
            // image.onload = function () {

            //     //创建
            //     const image3D = new MyImage('imageback', image, 1.3 * 5, 1 * 5);
            //     frame.add(image3D);

            //     const bb2 = new BB2RUVMesh('BB2SJ', 0.5, 0.5, 0.2);
            //     frame.add(bb2);


            //     canvas.addEventListener('mousemove', function (e) {
            //         const { clientX, clientY } = e;
            //         const cur = getViewToWorld(clientX, clientY);
            //         image3D.setUniform('u_ModelM4', { value: new Matrix4().setPosition(cur.x, 0, cur.z).elements });
            //     })

            // };



            const image = new Image();
            image.src = '../image/image01.jpg';
            image.onload = function () {

                //创建
                const image3D = new MyImage('imageback', image, 1.3 * 1, 1 * 1);
                frame.add(image3D);

                const earth = new ZoomMesh('earth', 0.2);
                frame.add(earth);


                canvas.addEventListener('mousemove', function (e) {
                    const { clientX, clientY } = e;
                    const cur = getViewToWorld(clientX, clientY);

                    earth.setUniform('u_ModelM4', { value: new Matrix4().setPosition(cur.x, 0, cur.z).elements });
                });
            };



        }
    }


    getViewToWorld(clientX: number, clientY: number) {
        const [hx, hy] = [canvas.width / 2, canvas.height / 2];
        const [x, y] = [(clientX - hx) / hx, -(clientY - hy) / hy];
        const worldPosi = new Vector3(x, y, 0).applyMatrix4(pvM4.clone().invert())
        return worldPosi;
    }

    render() {
        return (
            <div>
                <canvas id='canvas' ref={(ele) => (canvas = ele!)} ></canvas>
            </div>
        );
    }
}

export default App;
